<template>
  <div>
    <div>
      <el-checkbox v-model="symbol" @change="refresh">二维气泡图</el-checkbox>
    </div>
    <common-echarts :option="option" ref="echarts"></common-echarts>
  </div>
</template>

<script>
import CommonEcharts from "./echarts.vue";

export default {
  name: "ScatterEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      const { symbol } = this;

      let series_0 = {
        name: "A销量",
        type: "scatter",
        data: [
          [1, 2], // x,y轴的位置
          [3.0, 4.8],
          [7.0, 5.68],
          [11, 21],
          [13.0, 14.8],
          [17.0, 15.68],
        ],
      };

      if (symbol) {
        series_0.data = series_0.data.map((item) => {
          // 添加一个气泡的大小
          item.push(parseInt(Math.random() * 30) + 1);
          return item;
        });

        // 设置气泡大小取数组中的第几个数字
        series_0.symbolSize = function (data) {
          return data[2] || 10;
        };
      }

      let series = [
        series_0,
        {
          name: "B销量",
          type: "scatter",
          data: [
            [1.3, 2.3],
            [3.3, 4.3],
            [7.3, 5.3],
            [11.3, 21.3],
            [13.3, 14.3],
            [17.3, 15.3],
          ],
        },
      ];

      return {
        title: {
          text: "多类别的散点图",
        },
        xAxis: {},
        yAxis: {},
        legend: {
          data: ["A销量", "B销量"],
        },
        series: series,
      };
    },
  },
  data() {
    return {
      symbol: true,
    };
  },
  methods: {
    refresh() {
      console.log("option:", this.option);
      this.$nextTick(this.$refs.echarts.refresh);
    },
  },
};
</script>
